<template>
  <view class="pet">
    <view class="flex">
      <view>
        <image
          :src="catObj.avatar"
          class="pet-image"
        ></image>
      </view>

      <view class="pet-all">
        <view class="flex align-center justify-sb">
          <view class="flex align-center">
            <view class="pet-name">{{ catObj.nickName }}</view>
            <text
              class="iconfont"
              style="margin-left: 5px"
              :class="catObj.gender === 'GG' ? 'icon-iconnan' : 'icon-iconnv'"
            ></text>
          </view>
          <view class="pet-qty flex align-center">
            <text
              class="iconfont icon-renqizhi"
              style="color: #ff7ce3"
            ></text>
            <text class="text-name">人气值</text>
            <text class="text-count">{{ catObj.readQty }}</text>
          </view>
        </view>
        <view>
          <view class="pet-tag">
            <text
              v-for="(item, index) in arrtags"
              :key="index"
              :class="{
                'popularity-red': isPersonalityTag(item),
                'popularity-green': !isPersonalityTag(item),
              }"
              class="popularity"
            >
              {{ item }}
            </text>
          </view>
        </view>
      </view>
    </view>
    <view
      v-if="catObj.status !== PET_STATUS.ADOPT"
      class="live-house flex align-center"
    >
      <view>
        <image
          src="../../../static/detail/house.png"
          style="width: 16px; height: 16px; margin-right: 4px"
        ></image>
      </view>
      <text>居住在</text>
      <text class="basename">{{ catObj.baseName }}</text>
      <view
        v-if="catObj.areaInfo"
        class="flex align-center"
      >
        <image
          :src="catObj.areaInfo.detailPic"
          style="height: 20px"
          mode="heightFix"
        ></image>
        <zb-tooltip
          ref="tooltip13"
          placement="top"
          :content="catObj.areaInfo.moral"
          color="#666666;"
        >
          <view
            v-if="catObj.areaInfo.moral"
            class="iconfont icon-tishi"
            style="font-size: 14px; color: #afafaf; margin-left: 4px"
          ></view>
        </zb-tooltip>
      </view>
    </view>
    <view class="breed">
      <view
        v-for="(item, index) in tags"
        v-if="shouldShowItem(item)"
        :key="index"
        class="pet-breed"
      >
        <view class="flex align-center">
          <text :class="'iconfont ' + item.icon"></text>
          <view class="adopt-label">{{ item.label }}</view>
        </view>

        <view class="adopt-name">
          {{ getCatInfo(item) }}
        </view>
      </view>
    </view>
    <!--猫咪故事-->
    <view class="story">
      <view class="story-text">猫咪故事</view>
      <view class="story-descript">{{ catObj.introduction }}</view>
    </view>
    <!--时间轴-->
    <view class="timeline">
      <view class="timeline-card flex justify-sb">
        <view class="timeline-name">时间轴</view>
        <view
          v-if="temp.length >= 3"
          @click="timeup"
        >
          <view
            v-if="isShow"
            class="timeline-down flex align-center"
            @click="retract"
          >
            <view class="arrow">收起</view>
            <u-icon name="arrow-up"></u-icon>
          </view>
          <view
            v-else
            class="timeline-down flex align-center"
            @click="expand"
          >
            <view class="arrow">展开</view>
            <u-icon name="arrow-down"></u-icon>
          </view>
        </view>
      </view>

      <view class="box">
        <view
          v-for="(item, index) in temp"
          :key="index"
          class="one"
        >
          <view class="onedot">
            <image
              src="../../../static/detail/time.png"
              style="width: 14px; height: 14px"
            ></image>
          </view>
          <view
            v-if="index != temp.length - 1"
            class="oneline"
          ></view>
          <view class="onemain">
            <!--来到基地-->
            <view
              v-if="item.matterValue === 'adopt'"
              class="flex align-center wrap"
            >
              <text
                v-if="item.completeTime"
                class="time"
              >
                {{ item.completeTime.split(' ')[0] }}
              </text>
              <text class="time">{{ catObj.nickName }}</text>
              <text class="time">来到</text>
              <image
                src="../../../static/detail/house.png"
                style="width: 16px; height: 16px; margin-right: 4px"
              ></image>
              <text class="base-name">{{ catObj.baseName }}</text>
              <view
                v-if="item.creator !== null"
                class="flex align-center"
              >
                <text class="person">,送养人</text>
                <view class="tag-all flex align-center">
                  <image
                    :src="item.userAvatar"
                    style="width: 24px; height: 24px; border-radius: 24px"
                  ></image>
                  <text>{{ item.userNickName }}</text>
                </view>
              </view>
            </view>
            <!--云认养-->
            <view
              v-else-if="item.matterValue === 'cloud_adopt'"
              class="flex align-center wrap"
            >
              <text
                v-if="item.completeTime"
                class="time"
              >
                {{ item.completeTime.split(' ')[0] }}
              </text>
              <text class="time">{{ item.matterName }}</text>
              <view
                v-if="item.creator !== null"
                class="flex align-center"
              >
                <text class="person">,认养人</text>
                <view class="tag-all flex align-center">
                  <image
                    :src="item.userAvatar"
                    style="width: 24px; height: 24px; border-radius: 24px"
                  ></image>
                  <text class="nick-text">{{ item.userNickName }}</text>
                </view>
              </view>
            </view>
            <!--领养-->
            <view
              v-else-if="item.matterValue === 'adopt_pet'"
              class="flex align-center wrap"
            >
              <text
                v-if="item.completeTime"
                class="time"
              >
                {{ item.completeTime.split(' ')[0] }}
              </text>
              <text class="time">{{ item.matterName }}</text>
              <view
                v-if="item.creator !== null"
                class="flex align-center"
              >
                <text class="person">,领养人</text>
                <view class="tag-all flex align-center">
                  <image
                    :src="item.userAvatar"
                    style="width: 24px; height: 24px; border-radius: 24px"
                  ></image>
                  <text class="nick-text">{{ item.userNickName }}</text>
                </view>
              </view>
            </view>
            <!--没得送领养情况-->
            <view
              v-else
              class="flex align-center wrap"
            >
              <text
                v-if="item.completeTime"
                class="time"
              >
                {{ item.completeTime.split(' ')[0] }}
              </text>
              <text class="time">{{ item.matterName }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { PET_STATUS } from '@/const/index.js';
export default {
  props: {
    list: {
      type: Object,
    },
  },
  data() {
    return {
      PET_STATUS,
      catObj: {},
      isShow: false,
      temp: [],
      tags: [
        {
          icon: 'icon-pinzhong',
          label: '品种',
          key: 'varietyName',
          class: 'type-color',
        },
        {
          icon: 'icon-tizhong',
          label: '体重',
          key: 'weight',
          append: 'kg',
          class: 'weight-color',
        },
        {
          icon: 'icon-yimiao',
          label: '身长',
          key: 'height',
          append: 'cm',
          class: 'height-color',
        },
        {
          icon: 'icon-jingwei',
          label: '颈围',
          key: 'neckSize',
          append: 'cm',
          class: 'neck-color',
        },
        {
          icon: 'icon-jueyu',
          label: '绝育',
          key: 'sterilizationName',
          class: 'type-color',
        },
        {
          icon: 'icon-a-yimiao2',
          label: '疫苗',
          key: 'vaccineName',
          class: 'weight-color',
        },
        {
          icon: 'icon-quchong',
          label: '驱虫',
          key: 'insectRepellentName',
          class: 'height-color',
        },
        {
          icon: 'icon-nianling',
          label: '年龄',
          key: 'age',
          class: 'height-color',
        },
      ],
    };
  },
  computed: {
    arrtags() {
      let arrtags = [];
      const { popularity, personality } = this.catObj;
      // 每一种最多取三个
      const popularityArr = (popularity ? JSON.parse(popularity) : []).slice(
        0,
        3
      );
      const personalityArr = (personality ? JSON.parse(personality) : []).slice(
        0,
        3
      );
      if (popularityArr.length > 0) {
        arrtags = arrtags.concat(popularityArr.map((item) => item.value));
      }
      if (personalityArr.length > 0) {
        arrtags = arrtags.concat(personalityArr.map((item) => item.value));
      }
      return arrtags;
    },
  },
  watch: {
    list: {
      immediate: true, // 立即触发回调函数，即使没有变化
      handler(val) {
        if (val) {
          this.catObj = val;
          //时间轴默认展示出来
          this.temp = this.catObj.matters.slice(0, 3);
        }
      },
    },
  },
  methods: {
    isPersonalityTag(tag) {
      const { personality } = this.catObj;
      if (personality) {
        const personalityArr = JSON.parse(personality).map(
          (item) => item.value
        );
        return personalityArr.includes(tag);
      }
      return false;
    },
    timeup() {
      this.isShow = !this.isShow;
    },
    //展开
    expand() {
      this.temp = this.catObj.matters || [];
    },
    //收起
    retract() {
      this.temp = this.catObj.matters.slice(0, 3);
    },
    //身长、颈围为null 不展示出来
    shouldShowItem(item) {
      if (
        (item.label === '身长' || item.label === '颈围') &&
        this.catObj[item.key] === null
      ) {
        console.log('是进的这个嘛');
        return false;
      } else {
        return true;
      }
    },
    getCatInfo(item) {
      const catValue = this.catObj[item.key];
      if (catValue !== undefined && catValue !== null) {
        return catValue + (item.append || '');
      } else {
        return '未知';
      }
    },
  },
};
</script>

<style lang="scss">
.pet {
  .icon-iconnan {
    color: #2d8cf0;
  }

  .icon-iconnv {
    color: #fe7f73;
  }
  .pet-image {
    width: 52px;
    height: 52px;
    border-radius: 12px;
  }
  .pet-all {
    width: 100%;
    margin-left: 10px;
    .pet-name {
      font-weight: 500;
      font-size: 20px;
      color: #333333;
      white-space: nowrap; /* 确保文本不换行 */
      overflow: hidden; /* 隐藏超出容器的文本 */
      text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
      max-width: 140px; /* 设置最大宽度，根据实际需要调整 */
      word-break: break-all; /* 在单词内换行 */
      overflow-wrap: break-word; /* 在长单词或URL内换行 */
    }
    .pet-qty {
      font-weight: 400;
      font-size: 12px;
      .text-name {
        color: #666666;
      }
      .text-count {
        font-weight: 600;
        color: #333333;
      }
    }
    .pet-tag {
      display: flex;
      flex-wrap: wrap;
      text {
        margin-right: 5px;
        margin-top: 5px;
      }
      .popularity-red {
        background: #ffd7f7;
      }
      .popularity-green {
        background: #d5f9c7;
      }
      .popularity {
        // background: #d5f9c7;
        border-radius: 10px;
        padding: 2px 5px;
        text-align: center;
        box-sizing: border-box;
        text-align: center;
      }
    }
  }
  .live-house {
    background-image: linear-gradient(90deg, #ffffff00 2%, #fafafa 32%);
    border-radius: 8px;
    margin-top: 16px;
    padding: 6px 10px;
    box-sizing: border-box;
    .basename {
      font-weight: 500;
      font-size: 12px;
      color: #35bf00;
      margin: 0 4px;
    }
  }
  .breed {
    display: flex;
    flex-wrap: wrap;
    margin-top: 3px;
    .pet-breed {
      background: #fafafa;
      width: 31%;
      border-radius: 8px;
      padding: 10px 12px;
      box-sizing: border-box;
      margin-right: 8px;
      margin-top: 8px;
      &:nth-of-type(3n) {
        margin-right: 0;
      }
      .adopt-label {
        font-weight: 400;
        font-size: 10px;
        color: #666666;
        margin-left: 5px;
      }
      .adopt-name {
        font-weight: 500;
        font-size: 14px;
        color: #333333;
      }
    }
  }
  .story {
    .story-text {
      margin: 16px 0px 12px 0px;
      font-weight: 500;
      font-size: 14px;
      color: #333333;
    }
    .story-descript {
      background-image: linear-gradient(1deg, #f1ffee00 3%, #eeffea 99%);
      border-radius: 8px;
      padding: 12px;
      box-sizing: border-box;
      word-break: break-all;
    }
  }
  .timeline {
    margin-top: 16px;
    .timeline-name {
      font-size: 14px;
      color: #333333;
      font-weight: 500;
    }
    .timeline-down {
      font-weight: 400;
      font-size: 14px;
      color: #666666;
      .arrow {
        margin-right: 6px;
      }
    }
    .box {
      margin-top: 30rpx;
    }

    .one {
      position: relative;
      padding-bottom: 40rpx;
    }
    .scroll-all {
      margin: 0rpx 0rpx 36rpx 32rpx;
      box-sizing: border-box;
    }
    .pet-scroll {
      white-space: nowrap;
      overflow: hidden;
    }
    .onedot {
      left: -2rpx;
      width: 24rpx;
      height: 24rpx;
      position: absolute;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1;
    }

    .oneline {
      position: absolute;
      left: 8rpx;
      height: 100%;
      border-left: 2px solid #f7f8fa;
    }

    .onemain {
      position: relative;
      background: #f7f8fa;
      border-radius: 8px;
      padding: 30rpx 24rpx;
      box-sizing: border-box;
      margin-left: 40rpx;
      top: -12rpx;
      .time {
        font-weight: 500;
        font-size: 14px;
        color: #333333;
      }
      .base-name {
        color: $btn-primary-color;
        font-weight: 500;
        font-size: 14px;
      }
      .person {
        font-weight: 400;
        font-size: 12px;
        color: #666666;
      }
      .tag-all {
        background: #ffe3f7;
        border-radius: 15px;
        padding: 3px;
        box-sizing: border-box;
      }
      .nick-text {
        font-weight: 500;
        font-size: 12px;
        color: #333333;
        margin-left: 5px;
      }
    }
  }
}
</style>
